<!-- eslint-disable vue/no-deprecated-destroyed-lifecycle -->

<template>
    <div class="slidesShow" @mouseover="stopInterval" @mouseout="startInterval">
        <div v-for="(img, index) in images" :key="index" class="slidesShowImg"
            :style="{ opacity: index === currentSlide ? '1' : '0' }">
            <img :src="img.src" :alt="img.alt">
        </div>
        <div class="slidesShowUl">
            <ul>
                <li v-for="(li, index) in images" :key="index" class="slidesShowLi"
                    :class="{ 'slidesShowLiRed': index === currentSlide }" @click="changeIndex(index)"></li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentSlide: 0,
            images: [
                { src: '/src/assets/images/slidesShow01.png', alt: 'slideShow' },
                { src: '/src/assets/images/slidesShow01.png', alt: 'slideShow' },
                { src: '/src/assets/images/slidesShow01.png', alt: 'slideShow' },
                { src: '/src/assets/images/slidesShow01.png', alt: 'slideShow' },
                { src: '/src/assets/images/slidesShow01.png', alt: 'slideShow' }
            ],
            intervalId: null,
        };
    },
    mounted() {
        this.startInterval();
    },
    beforeUnmount() {
        this.stopInterval();
    },
    methods: {
        startInterval() {
            this.intervalId = setInterval(() => {
                this.currentSlide = (this.currentSlide + 1) % this.images.length;
            }, 3000);
        },
        stopInterval() {
            clearInterval(this.intervalId);
        },
        changeIndex(index) {
            this.stopInterval();
            this.currentSlide = index;
            this.startInterval;
        },
    },
};
</script>